<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">统计</el-breadcrumb-item>
      <el-breadcrumb-item>流量统计</el-breadcrumb-item>
    </el-breadcrumb>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">页面流量</span>
          <el-row style="text-align: right">
              <el-button size="small">导出数据</el-button>
              <el-button-group>
                <el-button size="small">最近7天</el-button>
                <el-button size="small">最近30天</el-button>
                <el-button size="small">最近90天</el-button>
              </el-button-group>
              <el-date-picker
                  size="small"
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="fetchData()" value-format="yyyy-MM-dd">
              </el-date-picker>
          </el-row>
        </div>
      </el-header>
      <el-main>
            统计页面：
            <el-select style="text-align: left" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          <div id="main" style="width: 1000px;height:400px;margin-left: 35px"></div>
      </el-main>
    </el-container>

    <el-container>
      <el-header>
        <div style="margin-top: 15px;">
          <span style="text-align: left;float: left">各个端口浏览占比</span>
          <el-row style="text-align: right">
              <el-button size="small">导出数据</el-button>
              <el-button-group>
                <el-button size="small">最近7天</el-button>
                <el-button size="small">最近30天</el-button>
                <el-button size="small">最近90天</el-button>
              </el-button-group>
              <el-date-picker
                  size="small"
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="fetchData()" value-format="yyyy-MM-dd">
              </el-date-picker>
          </el-row>
        </div>
      </el-header>
      <el-main>
          统计类型：
            <el-select style="text-align: left" v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <div id="main1" style="width: 1000px;height:400px;margin-left: 35px"></div>
      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  data () {
    return {
      dateRange: [],
      value: '',
      options: ''
    }
  },
  methods: {
      drawview () {
        const myChart=this.$echarts.init(document.getElementById("main"));
        const myChart1=this.$echarts.init(document.getElementById("main1"));
        const option = {
              // title: {
              //     text: '折线图堆叠'
              // },
              grid: {
                  left: '3%',
                  right: '4%',
                  bottom: '3%',
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: false,
                  data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
              },
              yAxis: {
                  type: 'value'
              },
              series: [
                  {
                      name: '浏览次数',
                      type: 'line',
                      stack: '总量',
                      data: [120, 132, 101, 134, 90, 230, 210]
                  },
                  {
                      name: '搜索引擎( UV )',
                      type: 'line',
                      stack: '总量',
                      data: [130, 132, 201, 334, 129, 133, 120]
                  }
              ],
              tooltip: {
                  trigger: 'axis'
              },
              legend: {
                  data: ['浏览次数', '搜索引擎( UV )']
              }
          }
        myChart.setOption(option)


          const option1 = {
                title: {
                    text: '某站点用户访问来源',
                    subtext: '纯属虚构',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '60%',
                        center: ['50%', '60%'],
                        data: [
                            {value: 335, name: '直接访问'},
                            {value: 310, name: '邮件营销'},
                            {value: 234, name: '联盟广告'},
                            {value: 135, name: '视频广告'},
                            {value: 1548, name: '搜索引擎'}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart1.setOption(option1)
      },
      fetchData () {
      }
  },
  mounted () {
    this.drawview()
  }
}
</script>

<style>
.el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>